<template>
  <boss-view>
    <div slot="content" class="operateData">
      <!-- 采购量 / 销售量 / 销售额 / 库存量 -->
      <div class="top">
        <!-- 采购量 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe606;</i>
              <p class="title">采购量</p>
            </div>
            <em></em>
            <div class="right">
              <div class="day">
                <p class="title">当日</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentDayPurchaseWeight"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">吨</i>
                </p>
              </div>
              <div class="month">
                <p class="title">当月</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentMonthPurchaseWeight"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">吨</i>
                </p>
              </div>
            </div>
          </div>
        </view-item>
        <!-- 销售量 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe60c;</i>
              <p class="title">销售量</p>
            </div>
            <em></em>
            <div class="right">
              <div class="day">
                <p class="title">当日</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentDaySaleWeight"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">吨</i>
                </p>
              </div>
              <div class="month">
                <p class="title">当月</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentMonthSaleWeight"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">吨</i>
                </p>
              </div>
            </div>
          </div>
        </view-item>
        <!-- 销售额 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe60a;</i>
              <p class="title">销售额</p>
            </div>
            <em></em>
            <div class="right">
              <div class="day">
                <p class="title">当日</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentDaySalePrice"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </p>
              </div>
              <div class="month">
                <p class="title">当月</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.currentMonthSalePrice"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </p>
              </div>
            </div>
          </div>
        </view-item>
        <!-- 库存量 -->
        <view-item>
          <div slot="mainData" class="mainData">
            <div class="left">
              <i class="bossVersion">&#xe60e;</i>
              <p class="title">库存量</p>
            </div>
            <em></em>
            <div class="right">
              <div class="day">
                <p class="title">总量</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.inventoryStat.totalWeight"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">吨</i>
                </p>
              </div>
              <div class="month">
                <p class="title">总价</p>
                <p class="number">
                  <i-count-up
                    :startVal="startVal"
                    :endVal="totalData.inventoryStat.inventoryCostValue"
                    :decimals="decimals"
                    :duration="duration"
                    :options="options"
                  />
                  <i class="units">万元</i>
                </p>
              </div>
            </div>
          </div>
        </view-item>
      </div>

      <!-- 采购统计 / 销量统计 / 市场占比 -->
      <div class="cen">
        <view-inside-item>
          <div slot="insideData" class="insideData">
            <!-- 采购统计 -->
            <div class="purchase">
              <main-title>
                <span slot="txt" class="txt">采购统计</span>
              </main-title>
              <div class="chartTips">单位:吨</div>
              <line-chartss
                v-model="purchaseArr"
                :chartStyle="'min-height:255px;'"
                :option="purchaseOption"
              ></line-chartss>
            </div>
            <em></em>
            <!-- 销量统计 -->
            <div class="pin">
              <main-title>
                <span slot="txt" class="txt">销量统计</span>
              </main-title>
              <div class="chartTips">单位:吨</div>
              <bar-line-charts
                v-model="salesStatisticsArr"
                :option="salesStatisticsOption"
                :chartStyle="'min-height:255px;'"
              ></bar-line-charts>
            </div>
            <em></em>
            <!-- 市场占比 -->
            <div class="market">
              <main-title>
                <span slot="txt" class="txt">市场占比</span>
              </main-title>
              <div class="chartTips chartTips-top">单位:吨</div>
              <pie-chart
                v-model="marketShareArr"
                :option="seniorityOption"
                :chartStyle="'min-height:235px;'"
              ></pie-chart>
            </div>
          </div>
        </view-inside-item>
      </div>

      <!-- 销量商品对比 / 用户访问量 -->
      <div class="bot">
        <!-- 销量商品对比 -->
        <view-chart-item>
          <div slot="chartData" class="chartData">
            <main-title>
              <span slot="txt" class="txt">销量商品占比</span>
            </main-title>
            <div class="chartTips">单位:吨</div>
            <pie-chart
              v-model="salesVolumeArr"
              :option="seniorityOption"
              :chartStyle="'min-height:255px;'"
            ></pie-chart>
          </div>
        </view-chart-item>

        <!-- 用户访问量 -->
        <view-inside-item>
          <div slot="insideData" class="insideData">
            <!-- 平台用户数 / 日增长 / 增长率 -->
            <div class="rate">
              <div class="platform">
                <p class="title">平台用户数</p>
                <p class="number">{{userData.totalCount}}</p>
              </div>
              <div class="increaseRate">
                <div class="day">
                  <p class="title">月增长</p>
                  <p class="number">{{userData.lastMonthAddMemberCount}}</p>
                </div>
                <div class="increase">
                  <p class="title">增长率</p>
                  <p class="number flexYbase">
                    <i-count-up
                      :startVal="startVal"
                      :endVal="userData.growthRate"
                      :decimals="increaseDecimals"
                      :duration="duration"
                      :options="options"
                    />
                    <i class="units">%</i>
                  </p>
                </div>
              </div>
            </div>
            <em></em>
            <!-- 用户访问量 -->
            <div class="accessing">
              <main-title>
                <span slot="txt" class="txt">用户访问量</span>
              </main-title>
              <div class="chartTips">单位:人</div>
              <line-chart
                v-model="userVisitsArr"
                :chartStyle="'min-height:255px;'"
                :option="lineChartOption"
              ></line-chart>
            </div>
          </div>
        </view-inside-item>
      </div>
    </div>
  </boss-view>
</template>

<script>
import ICountUp from "vue-countup-v2";
import viewItem from "@/components/bossVersion/viewItem";
import viewChartItem from "@/components/bossVersion/viewChartItem";
import viewInsideItem from "@/components/bossVersion/viewInsideItem";
import mainTitle from "@/components/bossVersion/mainTitle";
import bossView from "@/components/bossVersion/bossView";
import lineChartss from "@/components/Charts/lineChartssSmooth";
import pieChart from "@/components/Charts/pieChart";
import lineChart from "@/components/Charts/lineChartSmooth";
import barLineCharts from "@/components/Charts/barLineCharts";
import {
  GetLargeScreenDataForBoss,
  GetSteelRingPageView
} from "@/api/bossVersion/SteelRingForSelfSupport";
export default {
  components: {
    ICountUp,
    lineChart,
    barLineCharts,
    pieChart,
    lineChartss,
    viewItem,
    viewChartItem,
    viewInsideItem,
    mainTitle,
    bossView
  },
  data() {
    return {
      // 数字
      startVal: 0,
      increaseDecimals: 2, // 增长率
      decimals: 0,
      totaDecimals: 2,
      duration: 2.5,
      options: {
        useEasing: true,
        useGrouping: true,
        separator: ",",
        decimal: ".",
        prefix: "",
        suffix: ""
      },
      userData: {
        growthRate: "0",
        lastMonthAddMemberCount: 0,
        memberVisitorCountList: [],
        monthBeforeLastAddMemberCount: 0,
        totalCount: 0
      },
      totalData: {
        currentDayPurchaseWeight: 0,
        currentMonthPurchaseWeight: 0,
        currentDaySalePrice: 0,
        currentMonthSalePrice: 0,
        currentDaySaleWeight: 0,
        currentMonthSaleWeight: 0,
        inventoryStat: {
          totalWeight: 0,
          inventoryCostValue: 0
        },
        purchaseStatList: [],
        saleStatList: [
          {
            day: 0,
            dayStr: "string",
            saleTotalWeight: 0,
            saleTotalPrice: 0
          }
        ],
        marketShareList: [
          {
            totalWeight: 0,
            area: "string",
            percentage: 0
          }
        ],
        proportionGoodsSoldList: [
          {
            totalWeight: 0,
            productName: "string",
            percentage: 0
          }
        ]
      },
      userVisitsArr: [], // 用户访问量
      lineChartOption: {
        grid: {
          width: "96%",
          height: 160,
          top: 60,
          left: "5%"
        },
        showSymbol: "none",
        label: {
          show: false
        },
        xAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            rotate: 0,
            interval: 0,
            rich: {
              // x轴富文本样式
              value: {
                color: "#48e5ff"
              }
            }
          },
          axisTick: {
            show: false
          }
        },
        yAxis: {
          axisLine: {
            show: false,
            lineStyle: {
              color: "rgba(40,231,135,0.5)"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          }
        },
        startColor: "rgba(40,231,135,0.3)",
        endColor: "rgba(40,231,135,0.1)",
        color: "#28e787"
      },
      salesStatisticsArr: [], // 销量统计
      salesStatisticsOption: {
        startColor: "#00D1FF",
        endColor: "#088CEB",
        legend: {
          show: true,
          top: 20,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        barWidth: 14,
        noSmooth: true,
        xAxis: {
          axisLabel: {
            rotate: 0
          }
        },
        grid: {
          height: 150,
          top: 70,
          left: "8%"
        }
        // unit: [" 吨", " 吨"]
      },
      marketShareArr: [], // 市场占比
      salesVolumeArr: [], // 销量商品对比
      seniorityOption: {
        color: ["#28e787", "#f0bd26", "#48e5ff", "#FF7145", "#ff3e9a"],
        radius: ["65%", "80%"],
        center: ["50%", "55%"],
        // roseType: "radius",
        startAngle: 250,
        formatter: function(value) {
          return "{value|" + value.name + "}";
        },
        hidePieMargin: true,
        showLine: true,
        showLabel: true,
        legend: {
          show: false
        }
      },
      purchaseArr: [], // 采购统计
      purchaseOption: {
        dataZoom: [
          {
            show: false
          }
        ],
        toolTipTxtColor: "#48e5ff",
        grid: {
          width: "88%",
          height: 150,
          top: 70,
          left: "8%",
          right: "10%",
          bottom: "20%"
        },
        legendColor: "#48e5ff",
        legend: {
          top: 20,
          right: 0,
          data: [
            {
              icon: "rect"
            },
            {
              icon: "rect"
            },
            {
              icon: "rect"
            }
          ]
        },
        hideLineColor: true,
        showSymbol: "none",
        tooltip: {
          axisPointer: {
            shadowStyle: {
              color: {
                colorStops: [
                  {
                    offset: 0,
                    color: "rgba(0,0,0,0)" // 0% 处的颜色
                  },
                  {
                    offset: 1,
                    color: "rgba(0,209,255,0.2)" // 100% 处的颜色
                  }
                ]
              }
            }
          }
        },
        showLabel: false,
        xAxis: {
          z: 10,
          boundaryGap: false,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            rotate: 0,
            inside: false,
            rich: {
              value: {
                color: "#48e5ff"
              }
            }
          }
        },
        yAxis: {
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: "rgba(47, 240, 210, 0.2)",
              type: "dashed"
            }
          },
          axisLabel: {
            color: "#48e5ff"
          }
        },
        color: ["#FAAF3B", "#28e787", "#ff3e9a", "#48e5ff", "#ff7145"]
      }
    };
  },
  mounted() {
    this.GetTotalData();
    this.GetUserVisitsArr();
    // var issuanceOfQuantity = [
    //       {
    //         name: "收件量",
    //         type: "bar",
    //         option: {},
    //         value: []
    //       },
    //       {
    //         name: "发件量",
    //         type: "line",
    //         option: {},
    //         value: []
    //       }
    //     ];
    //     res.data.result.forEach(element => {
    //       var item1 = {
    //         name: element.xData1,
    //         value: element.list[0].value
    //       };
    //       var item2 = {
    //         name: element.xData1,
    //         value: element.list[1].value
    //       };
    //       issuanceOfQuantity[0].value.push(item2);
    //       issuanceOfQuantity[1].value.push(item1);
    //     });
  },
  methods: {
    // 访问量相关
    async GetUserVisitsArr() {
      try {
        var res = await GetSteelRingPageView();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "userData", resData);
          resData.memberVisitorCountList.forEach(element => {
            element.name = this.$utils.formatterMonthFun(
              element.memberVisitorMonth
            );
            element.value = element.memberVisitorCount;
          });
          this.$set(this, "userVisitsArr", resData.memberVisitorCountList);
        }
      } catch (e) {
        console.log(e);
      }
    },
    // 上部总数据
    async GetTotalData() {
      try {
        var res = await GetLargeScreenDataForBoss();
        if (res.data.code === "0") {
          var resData = res.data.result;
          this.$set(this, "totalData", resData);
          this.setPurchaseStats(resData);
          this.setSaleStats(resData);
          this.setPieCharts(resData);
          // debugger;
        }
      } catch (e) {
        console.log(e);
      }
    },
    setPurchaseStats(resData) {
      var purchaseStats = [];
      resData.purchaseStatList.forEach(item => {
        var obj = {
          name: "",
          list: []
        };
        obj.name = this.$utils.formatterMonthFun(item.dayStr);
        obj.list = [
          {
            name: "整体",
            value: item.purchaseTotalWeight
          },
          {
            name: "厂采",
            value: item.factoryPurchaseWeight
          },
          {
            name: "地采",
            value: item.supplierPurchaseWeight
          }
        ];
        purchaseStats.push(obj);
      });
      this.$set(this, "purchaseArr", purchaseStats); // 采购统计
    },
    setSaleStats(resData) {
      var salesStatisticsArr = [
        {
          name: "销量",
          type: "bar",
          option: {},
          value: []
        },
        {
          name: "趋势",
          type: "line",
          option: {},
          value: []
        }
      ];
      resData.saleStatList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        obj.name = this.$utils.formatterMonthFun(item.dayStr);
        obj.value = item.saleTotalWeight;
        salesStatisticsArr[0].value.push(obj);
        salesStatisticsArr[1].value.push(obj);
      });
      this.$set(this, "salesStatisticsArr", salesStatisticsArr);
    },
    setPieCharts(resData) {
      var marketShareList = [];
      var proportionGoodsSoldList = [];
      resData.marketShareList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        obj.name = item.area;
        obj.value = item.totalWeight;
        marketShareList.push(obj);
      });
      this.$set(this, "marketShareArr", marketShareList);
      resData.proportionGoodsSoldList.forEach(item => {
        var obj = {
          name: "",
          value: 0
        };
        // obj.name = item.productName.slice(5, item.productName.length);
        obj.name = item.productName;
        obj.value = item.totalWeight;
        proportionGoodsSoldList.push(obj);
      });
      this.$set(this, "salesVolumeArr", proportionGoodsSoldList);
      // debugger;
    }
  }
};
</script>


<style lang="scss" scoped>
@import "../../../../styles/bossVersion/_basics";

.operateData {
  @include absoluteAllSides(94, 20, 20, 140, 1);
  .item {
    width: 425px;
    height: 270px;
    padding: 44px;
    line-height: 1;

    .mainData {
      @include flexYcen;
      .left {
        @include flexFdcXcen;
        & > i.bossVersion {
          margin-bottom: 15px;
          font-size: 30px;
        }
        & > p.title {
          @include bold(20px);
        }
      }
      em {
        width: 1px;
        height: 180px;
        margin: 0 35px;
        background-color: $color9;
      }
      .right {
        .day {
          & > .title {
            font-size: 18px;
          }
          & > .number {
            margin-top: 5px;
            & > span {
              @include din(46px);
              & > i {
                font-size: 24px;
              }
            }
            & > .units {
              font-size: 16px;
            }
          }
        }
        .month {
          margin-top: 18px;
          & > .title {
            font-size: 14px;
          }
          & > .number {
            margin-top: 5px;
            & > span {
              @include din(28px);
              & > i {
                font-size: 18px;
              }
            }
            & > .units {
              font-size: 14px;
            }
          }
        }
      }
    }

    &:nth-of-type(1) {
      color: $color3;
    }
    &:nth-of-type(2) {
      color: $color4;
    }
    &:nth-of-type(3) {
      color: $color5;
    }
    &:nth-of-type(4) {
      color: $color1;
    }
  }
  // 采购量 / 销售量 / 销售额 / 库存量
  .top {
    @include flex;
  }
  // 采购统计 / 销量统计 / 市场占比
  .cen {
    margin: 20px 0;
    & > .insideItem {
      width: 100%;
      height: 328px;
      & > .insideData {
        @include flexYcen;
        .purchase,
        .pin,
        .market {
          position: relative;
          z-index: 1;
          width: calc(100% / 3 - 30px);
          .chartTips {
            @include absoluteTLSide(42, 0, 1);
          }
          .chartTips-top {
            top: 32px;
          }
        }
        & > em {
          width: 1px;
          height: 230px;
          margin: 0 30px;
          background-color: $color9;
        }
        .chart {
          margin-top: 15px;
        }
      }
    }
  }
  // 销量商品对比 / 用户访问量
  .bot {
    @include flex;
    .chartItem {
      width: 425px;
      height: 328px;
      .chartData {
        position: relative;
        .chartTips {
          position: absolute;
          top: 35px;
        }
      }
      .chart {
        margin-top: 15px;
      }
    }
    // 用户访问量
    .insideItem {
      width: 1315px;
      height: 328px;

      & > .insideData {
        @include flexYcen;
        line-height: 1;
        & > .rate {
          width: 404px;
          .number {
            margin-top: 5px;
          }
          & > .platform {
            margin-bottom: 25px;
            color: $budget;
            text-align: center;
            & > .title {
              font-size: 18px;
              margin: 10px auto;
            }
            & > .number {
              @include din(46px);
            }
          }
          & > .increaseRate {
            @include flexXjsaYcen;
            color: $color4;
            text-align: center;
            .title {
              font-size: 16px;
            }
            .number {
              @include din(30px);
              & > i {
                font-size: 16px;
              }
            }
          }
        }
        & > .accessing {
          position: relative;
          z-index: 1;
          width: calc(100% - 456px);
          .chartTips {
            @include absoluteTLSide(38, 0, 1);
          }
          .chart {
            margin-top: 15px;
          }
        }
        & > em {
          width: 1px;
          height: 230px;
          margin: 0 30px;
          background-color: $color9;
        }
      }
    }
  }
}
</style>
